class CommentBox extends React.Component {
    constructor(props) {
    	super(props);
        this.state = {data: []};
        // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
        this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this)
        this.handleCommentSubmit = this.handleCommentSubmit.bind(this)
        this.loadCommentsFromServer();
     	setInterval(this.loadCommentsFromServer, 5000);
    }
    loadCommentsFromServer(){
		fetch("/api/comments")
			.then(response => response.json())
			.then(data => this.setState({ data: data }))
			.catch(err => console.error("/api/comments", err.toString()))
	}
	handleCommentSubmit(comment){
		const comments = this.state.data;
	    const newComments = comments.concat([comment]);
	    this.setState({data: newComments});
		fetch("/api/comments", {
			method: 'post',
			headers: {
				'Accept': 'application/json',
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(comment)
		})
		.then(response => response.json())
		.then(data => this.setState({ data: data }))
		.catch(err => console.error("/api/comments", err.toString()))
	}
    render(){
        return (
			<div className="commentBox">
				<h1>Comments</h1>
				<CommentList data={this.state.data}/>
				<CommentForm onCommentSubmit={this.handleCommentSubmit}/>
			</div>
		);
    }
}

class CommentList extends React.Component {
	render(){
		const commentNodes = this.props.data.map(comment => {
			return (
		        <Comment author={comment.author}>
		            {comment.text}
		        </Comment>
		    );
		});
		return (
			<div className="commentList">
				{commentNodes}
			</div>
		);
	}
}

class Comment extends React.Component {
	rawMarkup(){
	    let rawMarkup = marked(this.props.children.toString(), {sanitize: true});
	    return { __html: rawMarkup };
	}
	render(){
		return (
			<div class="comment">
				<h2 className="commentAuthor">{this.props.author}</h2>
				<span dangerouslySetInnerHTML={this.rawMarkup()} />
			</div>
		);
	}
}

class CommentForm extends React.Component {
	constructor(props) {
    	super(props);
        // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
        this.handleSubmit = this.handleSubmit.bind(this)
    }
	handleSubmit(e) {
		e.preventDefault();
		const author = this.refs.author.value.trim();
	    const text = this.refs.text.value.trim();
	    if (!text || !author) {
	      return;
	    }
	    this.props.onCommentSubmit({author: author, text: text});
	    this.refs.author.value = '';
	    this.refs.text.value = '';
	    return;
	}
	render(){
		return (
			<form className="commentForm" onSubmit={this.handleSubmit}>
		        <input type="text" placeholder="Your name" ref="author"/>
		        <input type="text" placeholder="Say something..." ref="text"/>
		        <input type="submit" value="Post" />
		    </form>
		);
	}
}

ReactDOM.render(
	<CommentBox/>, 
	document.getElementById('content'), 
	function(){
		console.log("render");
	}
);